<template>
  <div class="top-search flex-around-center">
    <span>
      <i class="iconfont font32 icon-dizhi-icon primary" style="margin-right: 10px"></i>
      <i>{{address}}</i>
    </span>
    <search-input class="z-input"></search-input>
    <span class="info">
      <i class="iconfont font32 icon-shouye-xiaoxi"></i>
      <i class="info-num font16 error-bg font-fff" type="error">10</i>
    </span>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SearchInput from '../input/search.vue';
@Component({
  components: {
    SearchInput,
  },
})
export default class TopSearch extends Vue {
  private address: string = '西安';
}
</script>
<style lang="scss" scoped>
.top-search {
  width: 100%;
  height: 88px;
  line-height: 88px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  span {
    display: block;
    height: 88px;
  }
  .z-input {
    width: 516px;
    height: 60px;
  }
  .info {
    position: relative;
    .info-num {
      position: absolute;
      right: -15px;
      top: 15px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 50%;
    }
  }
  i {
    font-style: normal;
  }
}
</style>
